<div class="container mb-6" role="region" aria-labelledby="{{ hookable_metadata.configuration['test_attribute']|default('latest-products') ~ '-heading' }}">
    <h2 class="mb-5" id="{{ hookable_metadata.configuration['test_attribute']|default('latest-products') ~ '-heading' }}">{{ hookable_metadata.configuration.title|default('sylius.ui.latest_products')|trans }}</h2>

    <div {{ sylius_test_html_attribute(hookable_metadata.configuration.test_attribute|default('latest-products')) }}>
        <div class="products-grid">
            {% for product in latest_products %}
                <div>{{ component('sylius_shop:product:card', { product: product, template: hookable_metadata.configuration.product_template|default('@SyliusShop/product/common/card.html.twig'), hookableMetadata: hookable_metadata }) }}</div>
            {% endfor %}
        </div>
    </div>
</div>
